<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>GetDATA</title>

		<link rel="stylesheet" href="../../lib/element-ui/index.css">
		<link rel="stylesheet" href="./index.css">

	</head>
	<body>

		<div id="app">
			
			<el-tabs v-model="style.selectedIndex" @tab-click="onTabsChange" style="width: 100%; height: 100%;">
				<el-tab-pane label="　数据　" name="first">
					<div class="app-data">
						<div :class="{appDataHasTree: basic.hasTree}">
							<div>
								<el-input v-model="queryTreeKeyword" size="mini" ></el-input>
							</div>
							<div>
								<el-tree :data="queryTree.data"  ref="queryTree" :props="queryTree.props" :filter-node-method="onQueryTree" 
									@current-change="onCurrentChangeQueryTree" default-expand-all></el-tree>
							</div>
						</div>
						<div :class="{appDataHasTree: basic.hasTree}">
							<div v-if="queryParams && 0 < queryParams.length" class="app-data-param">
								<el-form :model="queryForm" ref="queryForm" :inline="true" label-width="auto" size="mini" >
									<div class="app-query-form-field">
										<template v-for="param in queryParams">
											<el-form-item :label="param.name || param.key">
												<el-input v-model="queryForm[param.key]" @keyup.enter.native="onQuery"></el-input>
											</el-form-item>
										</template>
									</div>
									<el-form-item>
										<el-button type="primary" @click.stop="onQuery">查询</el-button>
										<el-button type="primary" @click.stop="onReset">重置</el-button>
									</el-form-item>
								</el-form>
							</div>
							<div :class="queryParams && 0 < queryParams.length ? 'app-data-list' : 'app-data-list app-data-list-noqery'">
								<el-table :data="dataList" ref="dataList" row-key="__SNAIL_UNQIUE_KEY__" @selection-change="onSelectData"  @row-click="onSelectRowData"  @row-dblclick="onDBLSelectRowData"
									header-row-class-name="app-data-table-header-row-style" height="calc(100% - 58px)" style="width: 100%" highlight-current-row>
									<el-table-column v-if="style.selection" type="selection" width="55" header-align="center" align="center" :fixed="true"></el-table-column>
									<el-table-column v-if="!style.selection" width="55" header-align="center" align="center" :fixed="true">
										<template slot-scope="scope">
											<el-radio  v-model="recordDataIndex" :label="scope.$index" >&nbsp;</el-radio>
										</template>	
									</el-table-column>
									<el-table-column v-for="(title,index) in dataTitle" :key="title.key" v-if="title.display" :label="title.name" :property="title.key" 
										:width="title.width" :fixed="title.lock" header-align="center" sortable></el-table-column>
									<el-table-column></el-table-column>
								</el-table>
								<el-row type="flex" justify="center" align="middle" style="height: 58px;">
									<el-pagination layout="total, sizes, prev, pager, next, jumper" :total="paginationData.total_row_size" :page-sizes="[20, 50, 100, 200]" 
										@size-change="onPaginationSizeChange" @current-change="onPaginationChange"></el-pagination>
								</el-row>
							</div>
						</div>
					</div>
				</el-tab-pane>
				<el-tab-pane name="second">
					<span slot="label" style="padding: 0px 1em;">
						<el-badge :value="basic.recordSize" v-if="0<basic.recordSize" :max="99" class="app-tab-pane-second-title">记录</el-badge>
						<span v-if="0>=basic.recordSize" class="app-tab-pane-second-title">记录</span>
					</span>
			    	<div class="app-record">
			    		<el-table :data="recordDataList" row-key="__SNAIL_UNQIUE_KEY__" height="calc(100% - 58px)" header-row-class-name="app-record-table-header-row-style" style="width: 100%">
			    			<el-table-column type="index" width="50"></el-table-column>
							<el-table-column v-for="(title,index) in dataTitle"  :key="title.key" v-if="title.display" :label="title.name" :property="title.key" 
								:width="title.width" header-align="center"></el-table-column>
							<el-table-column label="操作" fixed="right" header-align="center" align="center" width="70">
								<template slot-scope="scope">
									<el-button type="text" size="small" @click="onDeleteRecord(scope.$index, scope.row)" >删除</el-button>
								</template>
							</el-table-column>
						</el-table>
			    	</div>
				</el-tab-pane>
			</el-tabs>
			
		</div>
	</body>

	<script type="text/javascript" src="../../lib/vue.js"></script>
	<script type="text/javascript" src="../../lib/element-ui/index.js"></script>
	<script type="text/javascript" src="../../lib/snail.common.js"></script>
	<script type="text/javascript" src="./index.js"></script>

</html>
